<template>
  <div class="bread">
    <el-breadcrumb separator="\">
      <el-breadcrumb-item v-for="(bread,index) in breads" :key="bread.name" >
        <a v-if="index!=breadsLast" :href="bread.path">
        {{bread.meta.title!=undefined?bread.meta.title:bread.name}}
        </a>
        <span v-else>
        {{bread.meta.title!=undefined?bread.meta.title:bread.name}}
        </span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  data(){
    let breads = this.$route.matched
    let breadsLast = breads.length-1;
    return {
      breads,
      breadsLast
    };
  },
  created(){

  }
};
</script>

<style lang="scss" scoped>
breadcrumb__item:last-child .el-breadcrumb__inner,.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
    color: #333!important;
    font-weight: normal
}
</style>
